```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model Context Protocol (MCP) 配置指南 | Cursor 集成</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #7c3aed;
            --accent: #f43f5e;
            --dark: #1e293b;
            --light: #f8fafc;
        }
        body {
            font-family: 'Noto Sans SC', 'Tahoma', 'Arial', 'Roboto', 'Droid Sans', 'Helvetica Neue', sans-serif;
            color: var(--dark);
            line-height: 1.8;
            background-color: #f9fafb;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: var(--dark);
        }
        .hero-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        .code-block {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            font-family: 'Courier New', monospace;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(251, 191, 36, 0.3);
            z-index: -1;
            transform: scaleX(1.05) skewX(-15deg);
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .step-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-5xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-2/3 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">
                        <span class="highlight">Model Context Protocol (MCP)</span>
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">
                        连接 AI 助手与数据源的开放标准，实现安全高效的文件系统操作
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#what-is-mcp" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition-all duration-300">
                            <i class="fas fa-info-circle mr-2"></i>了解 MCP
                        </a>
                        <a href="#configuration" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium transition-all duration-300">
                            <i class="fas fa-cog mr-2"></i>开始配置
                        </a>
                    </div>
                </div>
                <div class="md:w-1/3">
                    <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg p-6 rounded-xl border border-white border-opacity-20">
                        <div class="text-center">
                            <i class="fas fa-network-wired text-5xl mb-4"></i>
                            <h3 class="font-bold text-xl mb-2">AI 与文件系统的桥梁</h3>
                            <p class="text-sm opacity-90">安全 · 高效 · 可配置</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-5xl mx-auto px-4 py-12">
        <!-- What is MCP -->
        <section id="what-is-mcp" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">什么是 Filesystem MCP 服务器？</h2>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <p class="text-lg mb-6">
                        Filesystem MCP 服务器是一个基于 Node.js 实现的 MCP 服务器，它允许 AI 助手执行安全的文件操作，如读取、写入、列出目录或搜索文件。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
                        <p class="font-medium text-blue-800">
                            <i class="fas fa-shield-alt mr-2"></i>通过配置允许的目录实现沙箱化，确保操作仅限于指定路径，增强安全性。
                        </p>
                    </div>
                    <div class="bg-purple-50 border-l-4 border-purple-500 p-4">
                        <p class="font-medium text-purple-800">
                            <i class="fas fa-project-diagram mr-2"></i>MCP 作为开放标准，为 AI 助手与数据源和工具之间提供了统一的接口。
                        </p>
                    </div>
                </div>
                <div>
                    <div class="mermaid">
                        graph TD
                            A[AI 助手] -->|MCP 协议| B[Filesystem MCP 服务器]
                            B --> C[指定目录1]
                            B --> D[指定目录2]
                            B --> E[...更多目录]
                            style A fill:#3b82f6,color:#fff
                            style B fill:#8b5cf6,color:#fff
                            style C fill:#10b981,color:#fff
                            style D fill:#10b981,color:#fff
                            style E fill:#10b981,color:#fff
                    </div>
                </div>
            </div>
        </section>

        <!-- Prerequisites -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">前置条件</h2>
            </div>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="card bg-white p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="step-icon">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold">安装 Cursor</h3>
                    </div>
                    <p>确保已安装最新版本的 Cursor 编辑器（支持 MCP 服务器）。</p>
                </div>
                <div class="card bg-white p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="step-icon">
                            <i class="fab fa-node-js"></i>
                        </div>
                        <h3 class="text-xl font-bold">Node.js 环境</h3>
                    </div>
                    <p>Filesystem MCP 服务器基于 Node.js 实现，需安装 Node.js（建议版本 16 或更高）。</p>
                </div>
            </div>
        </section>

        <!-- Configuration Steps -->
        <section id="configuration" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">配置步骤</h2>
            </div>
            <div class="space-y-12">
                <!-- Step 1 -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-500 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4">1</div>
                        <h3 class="text-2xl font-bold">安装 Filesystem MCP 服务器</h3>
                    </div>
                    <div class="pl-12">
                        <div class="mb-6">
                            <p class="font-medium mb-3"><i class="fas fa-terminal mr-2 text-gray-500"></i>打开终端：在 Cursor 中，按 <code class="bg-gray-100 px-2 py-1 rounded">Ctrl + `</code> 打开终端，或使用系统终端。</p>
                            <p class="font-medium mb-3"><i class="fas fa-server mr-2 text-gray-500"></i>安装并运行 Filesystem 服务器：执行以下命令，指定允许访问的目录（例如您的项目文件夹）：</p>
                            <div class="code-block p-4 mb-4">
                                <span class="text-green-400">npx -y @modelcontextprotocol/server-filesystem /path/to/your/project</span>
                            </div>
                            <p class="text-sm text-gray-600">替换 <code class="bg-gray-100 px-1 py-0.5 rounded">/path/to/your/project</code> 为您希望 AI 访问的目录路径，例如 <code class="bg-gray-100 px-1 py-0.5 rounded">/Users/username/projects/my-app</code>。</p>
                        </div>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                            <p class="font-medium text-yellow-800">
                                <i class="fas fa-exclamation-triangle mr-2"></i>服务器只会允许操作指定的目录，任何未指定的路径都将被禁止访问。
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Step 2 -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-500 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4">2</div>
                        <h3 class="text-2xl font-bold">在 Cursor 中配置 MCP 服务器</h3>
                    </div>
                    <div class="pl-12">
                        <div class="mb-6">
                            <p class="font-medium mb-3"><i class="fas fa-file-alt mr-2 text-gray-500"></i>创建配置文件：</p>
                            <ul class="list-disc pl-6 mb-4 space-y-2">
                                <li>在您的项目根目录下创建 <code class="bg-gray-100 px-1 py-0.5 rounded">.cursor</code>文件夹（如果不存在）</li>
                                <li>在 <code class="bg-gray-100 px-1 py-0.5 rounded">.cursor</code>文件夹中创建 <code class="bg-gray-100 px-1 py-0.5 rounded">mcp.json</code> 文件</li>
                            </ul>
                            <p class="font-medium mb-3"><i class="fas fa-code mr-2 text-gray-500"></i>添加 Filesystem 服务器配置：根据您选择的运行方式，在 <code class="bg-gray-100 px-1 py-0.5 rounded">mcp.json</code> 中添加以下配置</p>
                            
                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <i class="fab fa-windows text-blue-500 mr-2"></i>
                                        <h4 class="font-bold">Windows 配置</h4>
                                    </div>
                                    <div class="code-block p-4">
                                        <pre>
{
  "mcpServers": {
    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\tostring\\Desktop"
      ]
    }
  }
}</pre>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex items-center mb-2">
                                        <i class="fab fa-apple text-gray-800 mr-2"></i>
                                        <h4 class="font-bold">macOS 配置</h4>
                                    </div>
                                    <div class="code-block p-4">
                                        <pre>
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    }
  }
}</pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
                                <p class="font-medium text-red-800">
                                    <i class="fas fa-exclamation-circle mr-2"></i><strong>注意：</strong>Windows 和 Mac 配置是有区别的。
                                </p>
                            </div>
                            
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1751700114126-6ac7b208-054b-4485-b862-506b989e1067.png" alt="配置成功截图" class="rounded-lg shadow-sm">
                                <p class="text-center text-sm text-gray-500 mt-2">绿色代表配置成功</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 3 -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-500 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4">3</div>
                        <h3 class="text-2xl font-bold">在 Cursor 中使用 Filesystem MCP</h3>
                    </div>
                    <div class="pl-12">
                        <div class="mb-6">
                            <p class="font-medium mb-3"><i class="fas fa-comments mr-2 text-gray-500"></i>打开 Chat 视图：</p>
                            <ul class="list-disc pl-6 mb-4 space-y-2">
                                <li>按 <code class="bg-gray-100 px-1 py-0.5 rounded">Ctrl + Alt + I</code>（Windows/Linux）或 <code class="bg-gray-100 px-1 py-0.5 rounded">Cmd + Ctrl + I</code>（Mac）打开 Cursor 的 Chat 视图</li>
                                <li>从下拉菜单中选择 <strong>Agent 模式</strong></li>
                            </ul>
                            
                            <p class="font-medium mb-3"><i class="fas fa-tools mr-2 text-gray-500"></i>使用 Filesystem 工具：Filesystem MCP 提供多种工具，例如：</p>
                            <div class="grid md:grid-cols-2 gap-4 mb-6">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-list text-blue-500 mr-2"></i>
                                        <h4 class="font-bold">list_files</h4>
                                    </div>
                                    <p class="text-sm text-gray-600">列出指定目录中的文件</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-book-open text-purple-500 mr-2"></i>
                                        <h4 class="font-bold">read_file</h4>
                                    </div>
                                    <p class="text-sm text-gray-600">读取文件内容</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-edit text-green-500 mr-2"></i>
                                        <h4 class="font-bold">write_file</h4>
                                    </div>
                                    <p class="text-sm text-gray-600">写入文件内容</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-project-diagram text-orange-500 mr-2"></i>
                                        <h4 class="font-bold">directory_tree</h4>
                                    </div>
                                    <p class="text-sm text-gray-600">生成目录树结构</p>
                                </div>
                            </div>
                            
                            <div class="bg-white p-4 rounded-lg border border-gray-200 mb-6">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1751700434351-db0db9b9-04a1-40e0-b75b-377809485c54.png" alt="Chat 视图截图" class="rounded-lg shadow-sm">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 4 -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-500 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4">4</div>
                        <h3 class="text-2xl font-bold">安全性注意事项</h3>
                    </div>
                    <div class="pl-12">
                        <div class="grid md:grid-cols-3 gap-4 mb-6">
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-shield-alt text-green-500 mr-2"></i>
                                    <h4 class="font-bold">沙箱化</h4>
                                </div>
                                <p class="text-sm text-gray-600">Filesystem MCP 服务器只允许操作配置中指定的目录，防止未经授权的访问。</p>
                            </div>
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-lock text-blue-500 mr-2"></i>
                                    <h4 class="font-bold">只读模式</h4>
                                </div>
                                <p class="text-sm text-gray-600">对于敏感目录，建议在 Docker 配置中添加 <code class="bg-gray-100 px-1 py-0.5 rounded">ro</code> 标志，限制为只读。</p>
                            </div>
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-ban text-red-500 mr-2"></i>
                                    <h4 class="font-bold">.mcpignore</h4>
                                </div>
                                <p class="text-sm text-gray-600">创建一个 <code class="bg-gray-100 px-1 py-0.5 rounded">.mcpignore</code> 文件，指定不想让 MCP 访问的文件或目录。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Practical Examples -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">结合 AI 进行文件操作</h2>
            </div>
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="border-b border-gray-200 p-4 bg-gray-50">
                    <h3 class="font-bold text-lg">示例项目: <code class="bg-gray-100 px-2 py-1 rounded">/Users/username/projects/my-app</code></h3>
                </div>
                <div class="p-6">
                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3">
                                <i class="fas fa-list text-xs"></i>
                            </div>
                            <h4 class="font-bold">列出目录</h4>
                        </div>
                        <div class="pl-9">
                            <p class="font-medium mb-3"><i class="fas fa-comment-dots mr-2 text-gray-500"></i>输入："Show me all files in my project."</p>
                            <div class="code-block p-4">
                                <span class="text-green-400">file  2025-07-01 10:00:00  README.md           1.5 kB</span><br>
                                <span class="text-blue-400">dir   2025-07-01 10:00:00  src</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3">
                                <i class="fas fa-book-open text-xs"></i>
                            </div>
                            <h4 class="font-bold">读取文件</h4>
                        </div>
                        <div class="pl-9">
                            <p class="font-medium mb-3"><i class="fas fa-comment-dots mr-2 text-gray-500"></i>输入："Read the content of README.md."</p>
                            <div class="code-block p-4">
                                <span class="text-yellow-300"># My App</span><br>
                                <span class="text-yellow-300">This is a sample project for MCP integration.</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3">
                                <i class="fas fa-edit text-xs"></i>
                            </div>
                            <h4 class="font-bold">写入文件</h4>
                        </div>
                        <div class="pl-9">
                            <p class="font-medium mb-3"><i class="fas fa-comment-dots mr-2 text-gray-500"></i>输入："Add a new section to README.md about MCP setup."</p>
                            <p class="text-sm text-gray-600">AI 将调用 <code class="bg-gray-100 px-1 py-0.5 rounded">write_file</code> 工具，更新文件内容。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Additional Resources -->
        <section>
            <div class="flex items-center mb-8">
                <div class="w-2 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">MCP Server 聚合网站</h2>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-external-link-alt text-blue-500 text-xl mr-4"></i>
                    <div>
                        <h3 class="font-bold text-xl mb-1">Smithery 集成的 MCP 平台</h3>
                        <a href="https://www.yuque.com/jtostring/qiwsg9/lidn89wzy64lt2vh" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">
                            https://www.yuque.com/jtostring/qiwsg9/lidn89wzy64lt2vh
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 微交互效果
        document.addEventListener('DOMContentLoaded', function() {
            const links = document.querySelectorAll('a[href^="#"]');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 20,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
```